import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NzFlexModule, NzJustify } from 'ng-zorro-antd/flex';

@Component({
  selector: 'app-flex-align',
  standalone: true,
  imports: [NzFlexModule, CommonModule],
  template: `
    <div class="demo">
      @for(justify of justifies; track $index) {
      <div class="mt-3">
        {{ justify }}
      </div>
      <div nz-flex [nzJustify]="justify">
        <div class="flex-item">A</div>
        <div class="flex-item even">B</div>
        <div class="flex-item">C</div>
        <div class="flex-item even">D</div>
      </div>
      }
    </div>
  `,
  styles: [
    `
      .flex-item {
        width: 10%;
        text-align: center;
        background-color: var(--bs-primary);
        color: white;
      }

      .even {
        background-color: var(--bs-success);
      }
    `,
  ],
})
export class FlexAlignComponent {
  justifies: NzJustify[] = [
    'flex-start',
    'center',
    'flex-end',
    'space-between',
    'space-around',
    'space-evenly',
  ];
}
